<template>
  <div class="operation">
    <div>详情</div>
    <div>
      <!-- <span @click="jump">编辑</span> -->
      <span @click="$router.go(-1)">返回</span>
    </div>
  </div>
  <div class="info">
    <ul>
      <li>姓名：{{ item.name }}</li>
      <li>联系方式：{{ item.phone }}</li>
      <li>毕业学校：{{ item.school }}</li>
      <li>学历：{{ item.education }}</li>
      <li>应聘岗位：{{ item.job }}</li>
      <li>信息来源：{{ item.from }}</li>
      <li>电子邮件：{{ item.email }}</li>
    </ul>
  </div>
  <div class="experience">个人履历：</div>
  <div class="bottom">
    <el-table :data="bottomList" border style="width: 100%">
      <el-table-column prop="date" label="工作时间" width="180" />
      <el-table-column prop="jobaddress" label="工作单位" width="180" />
      <el-table-column prop="job" label="职位" />
      <el-table-column prop="jobcont" label="主要内容" />
      <el-table-column prop="money" label="薪资" />
      <el-table-column prop="reason" label="离职原因" />
    </el-table>
  </div>
</template>

<script setup>
import axios from "axios";
import { useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
var route = useRoute();
var router = useRouter();
var id = route.query.Num;

var item = ref({});
axios.post("/api/user/info", { Num: id }).then((res) => {
  item.value = res.data;
});

var jump = (route) => {
  router.push({
    path: "/index/changePerson",
    query: route,
  });
};
var a = ref([]);
a.value = route.query;

var bottomList = ref([]);
var obj = ref([
  {
    date: a.value.jobTime,
    jobaddress: a.value.jobaddress,
    job: a.value.job,
    jobcont: a.value.jobcont,
    money: a.value.money,
    reason: a.value.reason,
  },
]);
bottomList.value = obj.value;
</script>

<style scoped>
.operation {
  height: 50px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-between;
}
.operation > div:nth-child(1) {
  line-height: 50px;
  margin-left: 20px;
  font-size: 12px;
}
.operation > div:nth-child(2) {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.operation > div > span {
  line-height: 30px;
  font-size: 12px;
  width: 60px;
  height: 30px;
  background-color: white;
  color: #63b9be;
  margin-right: 20px;
  text-align: center;
  cursor: pointer;
}
.operation > div > span:hover {
  background-color: #63b9be;
  color: white;
}
.info {
  font-size: 12px;
  color: #999;
}
ul {
  list-style: none;
}
li {
  padding-bottom: 40px;
}
.bottom {
  margin: 30px 20px;
}
.experience {
  margin: 10px 40px;
  font-size: 12px;
  color: #999999;
}
</style>